<template>
    <view class="main">
        <view class="title-box">
            <view class="title-bg">
                <image src="/static/mine/title.png" mode="aspectFill" />
            </view>
            <view class="dispaly-align-center txt">注册</view>
        </view>
        <view class="form">
            <view class="form-bg">
                <image src="/static/mine/form.png" mode="aspectFill" />
            </view>
            <view class="form-content">
                <view class="dispaly-just-between m-b-70">
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">学校选择</view>
                            <view class="icon">
                                <up-icon name="arrow-down-fill" color="#f5c245" size="14"></up-icon>
                            </view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="line"></view>
                            <view class="i">学校</view>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">专业</view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="line"></view>
                            <view class="ip">
                                <input type="text" class="i">
                            </view>
                        </view>
                    </view>
                </view>
                <view class="dispaly-just-between m-b-70">
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">年级</view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="line"></view>
                            <view class="ip">
                                <input type="text" class="i">
                            </view>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">学号</view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="line"></view>
                            <view class="ip">
                                <input type="text" class="i">
                            </view>
                        </view>
                    </view>
                </view>
                <view class="dispaly-just-between m-b-70">
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">微信</view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="line"></view>
                            <view class="ip">
                                <input type="text" class="i">
                            </view>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">QQ</view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="line"></view>
                            <view class="ip">
                                <input type="number" maxlength="11" class="i">
                            </view>
                        </view>
                    </view>
                </view>
                <view class="dispaly-just-between m-b-70">
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">姓名</view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="line"></view>
                            <view class="ip">
                                <input type="text" class="i">
                            </view>
                        </view>
                    </view>
                </view>
                <view class="dispaly-just-between m-b-70">
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">校园卡截图</view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="block" @click="upload">
                                <view class="block-bg">
                                    <image src="/static/mine/up-b.png" mode="aspectFill" />
                                </view>
                                <view class="block-a">
                                    <image src="/static/mine/up-a.png" mode="aspectFill" />
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">备注</view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="block">
                                <view class="block-bg">
                                    <image src="/static/mine/remark.png" mode="aspectFill" />
                                </view>
                                <view class="txt-a">
                                    <textarea class="a" placeholder="备注"></textarea>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="dispaly-just-between ">
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">手机号</view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="line"></view>
                            <view class="ip">
                                <input type="number" class="i" maxlength="11">
                            </view>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="form-title dispaly-center">
                            <view class="title">验证码</view>
                        </view>
                        <view class="ip-box dispaly-center">
                            <view class="line"></view>
                            <view class="ip">
                                <input type="number" class="i" maxlength="11">
                            </view>
                        </view>
                    </view>
                </view>
                <view class="code">
                    <view class="code-box" v-if="show" @click="getCode">
                        <view class="code-bg">
                            <image src="/static/mine/code.png" mode="aspectFill" />
                        </view>
                        <view class="get-code dispaly-align-center">获取</view>
                    </view>
                    <view class="code-box" v-else>
                        <view class="code-bg">
                            <image src="/static/mine/code.png" mode="aspectFill" />
                        </view>
                        <view class="get-code dispaly-align-center">{{ count + 's后获取' }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="proxy dispaly-center">
            <view class="check-box" @click="proxyBool = !proxyBool">
                <view class="check-bg">
                    <image src="/static/mine/check.png" mode="aspectFill" />
                </view>
                <view class="g" v-if="proxyBool">
                    <up-icon name="checkbox-mark" color="#fff" size="13"></up-icon>
                </view>
            </view>
            <view class="proxy-box dispaly-center">
                <view class="ar" @click="proxyBool = !proxyBool">我已阅读并同意</view>
                <view class="xy" @click="$goUrl('/subPackage/mine/agreement')">《用户协议》</view>
            </view>
        </view>
        <view class="register-box">
            <view class="title-bg">
                <image src="/static/mine/register.png" mode="aspectFill" />
            </view>
            <view class="dispaly-align-center txt">注册</view>
        </view>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { uploadImage, debounce } from '@/utils/util'

const upload = async () => {
    const res = await uploadImage()
    console.log(res);
}

// 获取验证码
const count = ref('')
const show = ref(true)
const timer = ref(null)
const getCode = debounce(
    () => {
        const TIME_COUNT = 3;
        if (!timer.value) {
            count.value = TIME_COUNT;
            show.value = false;
            timer.value = setInterval(() => {
                if (count.value > 0 && count.value <= TIME_COUNT) {
                    count.value -= 1;
                } else {
                    show.value = true;
                    clearInterval(timer.value);
                    timer.value = null;
                }
            }, 1000);
        }
    },
    1500,
    false
);

const proxyBool = ref(false)

const formData = reactive({
    school: '',
    profession: '',
    grade: '',
    studentNumber: '',
    name: '',
    wChat: '',
    QQ: '',
    campusCard: '',
    remark: '',
    phonenumber: '',
    code: ''
})
</script>

<style lang="scss" scoped>
.m-b-70 {
    margin-bottom: 30rpx;
}

.main {
    padding: 60rpx;

    .title-box {
        width: 632rpx;
        height: 76rpx;
        position: relative;

        .title-bg {
            width: 632rpx;
            height: 76rpx;

            image {
                width: 632rpx;
                height: 76rpx;
            }
        }

        .txt {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            font-family: IPix;
            font-size: 28rpx;
            color: #fff;
            line-height: 0rpx;
            width: 632rpx;
            height: 76rpx;
        }
    }

    .register-box {
        width: 632rpx;
        height: 90rpx;
        position: relative;

        .title-bg {
            width: 632rpx;
            height: 76rpx;

            image {
                width: 632rpx;
                height: 90rpx;
            }
        }

        .txt {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            font-family: IPix;
            font-size: 28rpx;
            color: #fff;
            line-height: 0rpx;
            width: 632rpx;
            height: 90rpx;
        }
    }

    .form {
        width: 632rpx;
        height: 964rpx;
        margin-top: 45rpx;
        position: relative;

        .form-bg {
            image {
                width: 632rpx;
                height: 964rpx;
            }
        }

        .form-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 60rpx;

            .code {
                display: flex;
                justify-content: flex-end;

                .code-box {
                    width: 126rpx;
                    height: 57rpx;
                    position: relative;

                    .code-bg {
                        width: 126rpx;
                        height: 57rpx;

                        image {
                            width: 126rpx;
                            height: 57rpx;
                        }
                    }

                    .get-code {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        width: 126rpx;
                        height: 57rpx;
                        font-family: IPix;
                        font-size: 24rpx;
                        color: #FFBF0F;
                    }
                }
            }

            .form-item {
                width: 50%;

                .form-title {
                    .title {
                        font-family: IPix;
                        font-size: 26rpx;
                        color: #FFFFFF;
                    }
                }

                .ip-box {
                    margin-top: 15rpx;

                    .block {
                        width: 242rpx;
                        height: 162rpx;
                        position: relative;

                        .txt-a {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            width: 242rpx;
                            height: 162rpx;
                            box-sizing: border-box;

                            .a {
                                box-sizing: border-box;
                                width: 242rpx;
                                height: 162rpx;
                                padding: 17rpx;
                                font-family: IPix;
                                font-size: 24rpx;
                                color: #000000;
                            }
                        }

                        .block-bg {
                            width: 242rpx;
                            height: 162rpx;

                            image {
                                width: 242rpx;
                                height: 162rpx;
                            }
                        }

                        .block-a {
                            width: 46rpx;
                            height: 46rpx;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            margin-left: -23rpx;
                            margin-top: -23rpx;

                            image {
                                width: 46rpx;
                                height: 46rpx;
                            }
                        }
                    }

                    .line {
                        margin-right: 10rpx;
                        width: 8rpx;
                        height: 2rpx;
                        background: #FFBF0F;
                    }

                    .i {
                        font-family: IPix;
                        font-size: 26rpx;
                        color: #FFBF0F;
                    }
                }
            }
        }
    }

    .proxy {
        margin: 39rpx 0 58rpx 0;

        .proxy-box {
            .ar {
                font-family: IPix;
                font-size: 26rpx;
                color: #000000;
            }

            .xy {
                font-family: IPix;
                font-size: 26rpx;
                color: #0B7BF9;
            }
        }

        .check-box {
            margin-right: 11rpx;
            position: relative;
            width: 36rpx;
            height: 36rpx;

            .check-bg {
                width: 36rpx;
                height: 36rpx;

                image {
                    width: 36rpx;
                    height: 36rpx;
                }
            }

            .g {
                width: 36rpx;
                height: 36rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
            }
        }
    }
}
</style>